<!--
 * @Author: your name
 * @Date: 2021-01-10 12:54:45
 * @LastEditTime: 2021-01-14 15:01:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shopping\src\pages\cart\main.vue
-->
<template>
  <view class="container">
    <block v-if="cartList.length">
      <view class="head" @tap="cartEdit">{{ editText }}</view>
      <view class="cart_list">
        <view class="cart_item" v-for="item in cartList" :key="item.goods_id">
          <view class="cart_item_left">
            <radio
              color="#EB4450"
              class="cart_item_select"
              :checked="item.goods_selected"
              @tap="changeSelected(item.goods_id)"
            />
          </view>
          <view class="cart_item_right">
            <GoodsItem :item="item" />
            <view class="count">
              <view
                class="iconfont icon-jianshao "
                :class="{disabled:item.goods_count ===1}"
                @tap="changeCount(item.goods_id, '-')"
              ></view>
              <text class="count_text">{{ item.goods_count }}</text>
              <view
                class="iconfont icon-zengjia"
                @tap="changeCount(item.goods_id, '+')"
              ></view>
            </view>
          </view>
        </view>
      </view>

      <view class="cart_bottom">
        <radio
          color="#EB4450"
          :checked="isSelectAll"
          class="bottom_select"
          @tap="changeSelectAllHandle"
        />
        <text class="select_text">全选</text>
        <block v-if="!isEdit">
          <text class="bottom_count">合计:</text>
          <text class="price">{{ priceCount }}</text>
          <text class="close_btn" @tap="goToPayHandle"
            >去结算({{ account }})</text
          >
        </block>
        <block v-if="isEdit">
          <text class="del_btn" @tap="delGoods">删除</text>
        </block>
      </view>
    </block>
    <view class="null_cart" v-if="cartList.length === 0">
      <image
        class="empty_image"
        mode="widthFix"
        src="@/static/cart_empty.gif"
      />
      <navigator
        url="/pages/index/main"
        open-type="switchTab"
        hover-class="none"
        class="empty_button"
        >去首页看看</navigator
      >
    </view>
  </view>
</template>

<script>
import GoodsItem from "@/components/goodsItem";
export default {
  components: {
    GoodsItem,
  },
  onLoad() {},
  // 🧨注意：由于购物车数据会时刻发生变化，所以每次显示页面的时候都应该获取最新数据
  //         onShow 每次显示页面都会触发F
  //  购物车页面作为tab页，onLoad 只会触发一次
  onShow() {
    this.cartList = uni.getStorageSync("cartList") || [];
    this.isEdit = false;
  },
  data() {
    return {
      // 为了避免上来先显示空的购物车状态，我们可以让数组的初始值长度不等于 0
      cartList: [{}],
      isEdit: false,
    };
  },
  watch: {
    // 使用深度监听，来更新本地存储的数据
    cartList: {
      deep: true,
      handler: (val) => {
        uni.setStorageSync("cartList", val);
      },
    },
  },
  computed: {
    // 全选按钮
    isSelectAll() {
      // 使用every()遍历数组  只要其中一个条件为false  就会跳出遍历 返回false  🤢如果传入的是空数组一定会返回true
      return this.cartList.every((item) => item.goods_selected);
    },
    editText() {
      return this.isEdit ? "完成" : "编辑";
    },
    account() {
      let account = 0;
      this.cartList.map((item) => {
        if (item.goods_selected) {
          account += item.goods_count;
        }
      });
      return account;
    },
    priceCount() {
      let priceCount = 0;
      this.cartList.map((item) => {
        if (item.goods_selected) {
          priceCount += item.goods_count * item.goods_price;
        }
      });
      return priceCount;
    },
  },
  methods: {
    changeSelected(id) {
      const index = this.cartList.findIndex((item) => item.goods_id === id);
      if (index != -1) {
        this.cartList[index].goods_selected = !this.cartList[index]
          .goods_selected;
      }
    },
    changeCount(id, symbol) {
      const index = this.cartList.findIndex((item) => item.goods_id === id);
      if (index != -1) {
        if (symbol == "-" && this.cartList[index].goods_count > 1) {
          this.cartList[index].goods_count -= 1;
        }
        if (symbol == "+") {
          this.cartList[index].goods_count += 1;
        }
      }
    },
    changeSelectAllHandle() {
      const bl = !this.isSelectAll;
      this.cartList.forEach((item) => {
        item.goods_selected = bl;
      });
    },
    cartEdit() {
      this.isEdit = !this.isEdit;
    },
    delGoods() {
      const res = this.cartList.filter((item) => !item.goods_selected);
      this.cartList = res;
    },
    goToPayHandle() {


      if(!uni.getStorageSync('token')){
        uni.showToast({
          title: '请登录，在付款！',
          icon:"none",
          duration: 1000
        });
        return
      }


      if (this.account > 0) {
        uni.navigateTo({
          url: "/pages/pay/main",
        });
      } else {
        uni.showToast({
          title: "请选择商品",
          icon: "none",
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 83rpx;
}
.null_cart {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
  .empty_button {
    width: 200rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: var(--mainColor);
    color: #fff;
    text-align: center;
    line-height: 60rpx;
    font-size: 30rpx;
  }
}

.head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20rpx 20rpx 0rpx 20rpx;
  font-size: 30rpx;
}
.cart_list {
  .cart_item {
    display: flex;
    align-items: center;
    padding: 0 26rpx;
    border-bottom: 1rpx solid #ddd;
    .cart_item_left {
      height: 100%;
    }

    .cart_item_right {
      flex: 1;
      position: relative;
      .count {
        position: absolute;
        right: 0rpx;
        bottom: 0rpx;
        display: flex;
        align-items: center;
        font-size: 30rpx;
        width: 170rpx;
        height: 108rpx;
        .count_text {
          // 用最小宽度确保大部分情况下都是对齐的，特殊情况也能正常显示数字
          min-width: 80rpx;
          padding: 0 10rpx;
          color: #666;
          text-align: center;
        }
        .disabled{
          opacity: .2;
        }
        .iconfont {
          font-size: 40rpx;
          &:last-child {
            font-size: 34rpx;
          }
        }
      }
    }
  }
}
.cart_bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0 23rpx;
  height: 83rpx;
  font-size: 26rpx;
  box-sizing: border-box;

  .select_text {
    color: #a1a1a1;
    padding: 0 26rpx;
  }
  .bottom_count {
    padding: 0 10rpx;
    font-weight: 700;
  }
  .price {
    flex: 1;
    font-size: 36rpx;
  }
  .del_btn {
    position: absolute;
    right: 23rpx;
    width: 150rpx;
    height: 52rpx;
    border-radius: 26rpx;
    border: 1px solid #ccc;
    color: var(--mainColor);
    font-size: 24rpx;
    line-height: 52rpx;
    text-align: center;
  }
  .close_btn {
    width: 150rpx;
    height: 52rpx;
    border-radius: 26rpx;
    background-color: var(--mainColor);
    color: #fff;
    line-height: 52rpx;
    text-align: center;
    font-size: 24rpx;
  }
}
</style>